<template>

	<view class="container">
		<view class="content-item">
			<!-- 上 -->
			<view class="content-wrapper">
				<image class="content-image" src="../../static/temp/cate3.jpg"></image>
			</view>

		</view>

		<view class="introduce-section">
			<view class="" style="display: flex;justify-content: space-between;">
				<text class="title">{{productInfo.name||"—"}}</text>
				<view class="text-box">
					<text class="title">{{goods.title}}</text>
					<tag :text="'已上架'" :type="'success'" :class="'tag-green'"></tag>
				</view>
			</view>

			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{productInfo.priceList[0].price}}</text>
				<text style="color: #686978;right: 10px;line-height: 62rpx;position: absolute;">1080+付款</text>

			</view>

		</view>





		<!-- 详情 -->
		<view class="income-box">
			<view class="text">
				<text>上传时间</text>
				<text>202222</text>
			</view>

			<view class="text">
				<text>大小</text>
				<text>526KB</text>
			</view>
			<view class="text">
				<text>下载量</text>
				<text>200次</text>
			</view>
			<view class="text">
				<text>数据类型</text>
				<text>知识产权</text>
			</view>

		</view>


		<!-- 数据详情 -->
		<view>

			<uni-card title="数据详情">
				<text class="uni-body">{{productInfo.brief}}</text>
			</uni-card>

		</view>

		<!-- 说明 -->
		<view style="padding-bottom: 80px;">


			<uni-card title="说明">
				<text class="uni-body">{{productInfo.detail}}</text>
			</uni-card>


		</view>

		<view class="page-bottom">
			<view class="p-b-btn" @click="downloadData()">
				<image class="bag-icon" src="/static/index/download.png"></image>
			</view>
<!--      TODO 下面这个图片改成分享的图片，然后分享到通讯录-->
      <view class="p-b-btn" @click="downloadData()">
        <image class="bag-icon" src="/static/index/download.png"></image>
      </view>
			<view class="bt-box">
				<button class="bt-pay" plain="true" @click="deleteData(productId)">取消共享</button>
			</view>
		</view>

	</view>


</template>

<script>
//TODO 数据产品根据状态查询(已上架，未上架，审核中)


	import tag from "@/components/min/tag.vue";
	import {
		toPay
	} from '../../api/trade';
	import {
		deleteProduction,
		getProductInfo
	} from "@/api/product";
	export default {
		data() {
			return {

				orderList: '',
				productId: '',
				priceId: '',
				productInfo: {},


			};
		},
		components:{
			tag
		},
		onLoad(options) {
			// this.loadData(),

			this.productId = options.id;
			this.priceId = options.priceId

			console.log("pro:", this.productId);
			if (this.productId) {
				this.$api.msg(`点击了${this.productId}`);
			}
			this.loadData();
		},


		methods: {
			showFullContent(item) {
				// handle displaying the full content of the selected item
				console.log(item.fullContent);
			},
			async loadData() {
				let data = await getProductInfo(this.productId);
				this.productInfo = data.data;
			},
			// 提交申请单
			async submit() {
				const parame = {
					"tradeCartList": [{
						"id": '',
						"number": 1,
						"priceId": this.priceId,
						"productId": this.productId
					}]
				};

				let res = await toPay(parame)

				if (res.code === 200) {

					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000
					});

				}
			},
			downloadData() {
			    // 获取数据的 fileUrl
			    const fileUrl = this.productInfo.fileUrl;
			    // 判断 fileUrl 是否存在
			    if (fileUrl) {
			      // 使用 uni.downloadFile API 下载文件
			      uni.downloadFile({
			        url: fileUrl,
			        success(res) {
			          // 下载成功后，可以进行一些操作，比如保存文件等
			          console.log('文件下载成功', res);
			        },
			        fail(err) {
			          // 下载失败时的处理
			          console.error('文件下载失败', err);
			        }
			      });
			    } else {
			      // 如果 fileUrl 不存在，提示用户数据文件不存在或无法下载
			      uni.showToast({
			        title: '数据文件不存在或无法下载',
			        icon: 'none',
			        duration: 2000
			      });
			    }
			  },
			// 取消共享
			deleteData(id){
				deleteProduction(id).then(res=>{
					if (res.code === 200) {
						console.log('res', res)
						this.$api.msg('修改成功');
						uni.navigateBack();
					} else {
						this.$api.msg(res.msg);
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.content-item {
		padding: 10px;

	}
	.content-item {
	    padding: 10px;

	}
	.content-wrapper {
		    display: flex;
		    align-items: center;
			.content-image {
			    width: 100%;
			    height:350upx;
			}

		}
	.carousel {

		position:relative;
		margin: 0 10px;
		swiper{
			height: 100%;
		}
		.image-wrapper{
			width: 100%;
			image{
				height: 175px;
			}
		}


	}
	.bag-icon {
	  width: 40px;
	  height: 40px;
	  margin-right: 10px;
	}
	/* 标题简介 */
	.introduce-section{

		padding: 20upx 30upx;

		.title{
			font-size: 32upx;
			color: #fff;
			height: 50upx;
			line-height: 50upx;
		}
		.state{
			color: #fff;
			position: absolute;
			right: 10px;
		}
		.price-box{
			display:flex;
			align-items:baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color:#fbdb92;
		}
		.price{
			font-size: $font-lg + 2upx;
		}
		.m-price{
			margin:0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}
		.coupon-tip{
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}
		.bot-row{
			display:flex;
			align-items:center;
			height: 50upx;
			font-size: $font-sm;
			color:#787986;
			text{
				flex: 1;
			}
		}
	}

	.content-wrapper {
		display: flex;
		align-items: center;
	}

	.content-image {
		width: 220upx;
		height: 220upx;
	}

	.content-details {
		flex: 1;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		/* 让内容垂直排列 */
		justify-content: space-between;
	}

	.content-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 220upx;
		padding: 30upx 0 30upx 0;
	}

	.content-title {
		max-height: 3.0em;
		/* 设置标题最多显示两行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 设置最大行数 */
		-webkit-box-orient: vertical;
		color: white;

	}

	.content-details {
		margin-top: 5px;
		/* 设置时间与标题间距 */
		color: darkgray;

	}

	.content-price {
		color: white;
		display: flex;
		justify-content: space-between;
	}




	.expand-button {
		background-color: #007AFF;
		color: white;
		border: none;
		padding: 5px 10px;
		border-radius: 5px;
		float: right;
	}

	.income-box {
		border-top: 1px darkgray solid;
		border-bottom: 1px darkgray solid;
		color: darkgray;
		margin-bottom: 20upx;
		padding: 0 10px;

		.text {
			display: flex;
			justify-content: space-between;
			font-size: $font-base;

			padding: 8px 0;
		}

		.text-price {
			display: flex;
			justify-content: space-between;
			padding: 15upx;
		}

		.text-end {
			display: flex;
			justify-content: flex-end;
		}

	}



	.page-bottom{
		padding: 10px 0;
		position:fixed;
		bottom:0px;
		z-index: 95;
		display: flex;

		align-items: center;
		width: 100%;

		background: #2f3045;
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		image{
			    width: 40px;
			    height: 40px;
			    margin-left: 20px;
		}

		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
			.yticon{
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
			&.active, &.active .yticon{
				color: $uni-color-primary;
			}
			.icon-fenxiang2{
				font-size: 42upx;
				transform: translateY(-2upx);
			}
			.icon-shoucang{
				font-size: 46upx;
			}
		}


	}
	.bt-box{
		    background: #2493f1;

		    margin-left: 50px;
			border-radius: 20px;
			button{
				color: #fff;
			}
	}
</style>
